<template>
  <div class="weathinfo">
    <div class="chart_box1" id="chart_box1"></div>
    <div class="chart_box2" id="chart_box2"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [],
      updatatime: ""
    };
  },
  methods: {
    getdata1() {
      let myChart = this.$echarts.init(document.getElementById("chart_box1"));
      const list = [
        {
          value: "50",
          name: "荔枝结果",
          textStyle: {
            shadowBlur: 4,
            shadowColor: "#ECEFFF",
            shadowOffsetY: 14,
            color: "#73DDFF"
          }
        }, // 50
        { value: "30", name: "荔枝" },
        { value: "29", name: "荔枝坏了" },
        { value: "28", name: "好评" },
        {
          value: "27",
          name: "差评",
          textStyle: {
            shadowBlur: 4,
            shadowColor: "#ECEFFF",
            shadowOffsetY: 14,
            color: "#73DDFF"
          }
        },
        { value: "26", name: "发霉" },
        { value: "25", name: "生病" },
        {
          value: "24",
          name: "枯萎",
          textStyle: {
            shadowBlur: 4,
            shadowColor: "#ECEFFF",
            shadowOffsetY: 14,
            color: "#73DDFF"
          }
        },
        { value: "23", name: "开花" },
        { value: "22", name: "结果" },
        { value: "21", name: "嫁接" }
      ];
      myChart.setOption({
        title: {
          text: "AI智能客服词云图Top10",
          left: "center",
          textStyle: {
            fontSize: 18,
            color: "rgba(255, 255, 255, 1)"
          }
        },
        tooltip: {
          show: true,
          borderColor: "#fe9a8bb3",
          borderWidth: 1,
          padding: [10, 15, 10, 15],
          confine: true,
          backgroundColor: "rgba(255, 255, 255, .9)",
          textStyle: {
            color: "hotpink",
            lineHeight: 22
          },
          extraCssText:
            "box-shadow: 0 4px 20px -4px rgba(199, 206, 215, .7);border-radius: 4px;"
        },
        series: [
          {
            type: "wordCloud",
            shape: "pentagon",
            left: "center",
            top: "center",
            width: "100%",
            height: "100%",
            right: null,
            bottom: null,
            sizeRange: [14, 50],
            rotationRange: [0, 0],
            rotationStep: 0,
            gridSize: 25,
            drawOutOfBound: false,
            layoutAnimation: true,
            textStyle: {
              fontFamily: "PingFangSC-Semibold",
              fontWeight: 600,
              color: function(params) {
                let colors = [
                  "#fe9a8bb3",
                  "#fe9a8bb3",
                  "#fe9a8b03",
                  "#9E87FFb3",
                  "#9E87FFb3",
                  "#9E87FFb3",
                  "#fe9a8bb3",
                  "#fe9a8bb3",
                  "#fe9a8bb3",
                  "#73DDFF",
                  "#58D5FF"
                ];
                return colors[parseInt(Math.random() * 10)];
              }
            },
            emphasis: {
              focus: "none"
            },

            // Data is an array. Each array item must have name and value property.
            data: list
          }
        ]
      });
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    getdata2() {
      let myChart = this.$echarts.init(document.getElementById("chart_box2"));

      myChart.setOption({
        // backgroundColor: "#0E1327",
        title: {
          text: "AI智能客服近半年访问量",
          left: "center",
          textStyle: {
            fontSize: 18,
            color: "rgba(255, 255, 255, 1)"
          }
        },
        grid: {
          bottom: "5%",
          top: "5%",
          left: "5%",
          right: "5%",
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none"
          }
        },
        xAxis: {
          splitLine: { show: false },
          axisLabel: { show: false },
          axisTick: { show: false },
          axisLine: { show: false },
          type: "value"
        },
        yAxis: [
          {
            type: "category",
            inverse: true, //排序
            axisLabel: {
              show: true,
              textStyle: {
                color: "#C9D2FA",
                fontSize: 16
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: ["七月", "八月", "九月", "十月", "十一月", "十二月"]
          }
        ],
        series: [
          {
            name: "访问量",
            type: "bar",
            zlevel: 1,
            itemStyle: {
              borderRadius: 30,
              color: "#2F8FFF"
            },
            label: {
              show: true, // 显示标签
              position: "right",
              fontSize: 16,
              color: "#fff",
              offset: [10, 0]
            },
            barWidth: 16,
            data: [52580, 65043, 70081, 75849, 80427, 82496]
          }
        ]
      });
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    }
  },
  mounted() {
    this.getdata1();
    this.getdata2();
  }
};
</script>

<style scoped>
.weathinfo {
  border-radius: 20px;
  /* background-color: rgb(143, 64, 64); */
}

.chart_box1 {
  border-radius: 20px;
  background-color: #4f774d;
  /* background-color: rgb(37, 113, 136); */
}
.chart_box2 {
  border-radius: 20px;
  background-color: #4f774d;
  /* background-color: #0E1327; */
}

@media screen and (max-width: 500px) {
  .weathinfo {
    max-width: 340px;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 10px;
    /* background-color: rgb(143, 64, 64); */
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    gap: 50px;
  }
  .chart_box1 {
    height: 300px;
    width: 100%;
    /* background-color: rgb(145, 146, 146); */
  }
  .chart_box2 {
    height: 300px;
    width: 100%;
    /* background-color: aqua; */
  }
}
@media screen and (min-width: 500px) and (max-width: 1900px) {
  .weathinfo {
    height: 100%;
    width: 70%;
    margin: 0 auto;
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 50px;
  }
  .chart_box1 {
    height: 500px;
    width: 500px;
    /* background-color: rgb(145, 146, 146); */
  }
  .chart_box2 {
    height: 500px;
    width: 500px;
    /* background-color: aqua; */
  }
}
</style>
